<template>
  <div class="operation-title">
    <div class="icon-wrapper">
      <img
        class="icon"
        :src="icon"
        alt="图标"
      >
    </div>


    <div class="title">
      <slot>
        {{ title }}
      </slot>
    </div>

    <div
      class="version"
    >
      {{ currentComponentInfo?.version === 'default' ? 'v1.0.0.0' : currentComponentInfo?.version }}
    </div>

    <div
      v-if="isShowUpdateNotice"
      class="update-notice"
      :style="{
        width: isHover ? '300px' : '20px'
      }"
      @mouseenter="isHover=true"
      @mouseleave="isHover=false"
    >
      <div v-if="isHover">
        该组件已升级,若使用最新功能,请重新创建组件
      </div>
      <div v-else>
        <el-icon><el-icon><WarningFilled /></el-icon></el-icon>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">

import {getLatestVersion, IImportedOperationComponentInfo} from "@/views/activity/actApp/componentsVersionControl";
import {ComputedRef, Ref} from "vue";

const props = withDefaults(defineProps<{
  icon: string;
  title: string;
}>(), {

})

const versionInfoList: ComputedRef<Pick<IImportedOperationComponentInfo, "version" | "componentName">[]> | undefined = inject("versionInfoList");
const currentComponentInfo: Ref<IImportedOperationComponentInfo> | undefined = inject("currentComponentInfo");
const currentPageConfig:Ref<any> | undefined = inject("currentPageConfig");

const isShowUpdateNotice:ComputedRef<boolean> = computed(() => {
  // console.log('versionInfoList', versionInfoList?.value)
  // console.log('currentComponentInfo', currentComponentInfo?.value)

  if (currentComponentInfo?.value?.version) {
    const componentsVersion = (versionInfoList?.value ?? [])
      .filter(item => item.componentName === currentComponentInfo.value.componentName)
      .map(item => item.version)

    // console.log('componentsVersion', componentsVersion)
    const latestVersion = getLatestVersion(...componentsVersion)

    // console.log("latest version", latestVersion);
    return latestVersion !== currentComponentInfo.value.version
  } else {
    return false
  }
})

const isHover = ref(false)


</script>

<style scoped lang="scss">
.operation-title {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 5px 10px;

  .icon-wrapper {
    position: relative;
    width: 50px;
    height: 50px;
    overflow: hidden;

    .icon {
      display: block;
      margin-right: 10px;
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
    }
  }


  .title {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
  }

  .version {
    color: #EEE;
    font-size: 12px;
  }

  .update-notice {
    position: absolute;
    right: 0;
    top: 0;
    background: rgba(255, 205, 188, 1);
    color: white;
    border-radius: 0 0 0 4px;
    font-size: 12px;
    transition: width linear 100ms;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
